{% extends "templates/main_template.html.j2" %}

{% import "macros/modal_confirmation.html.j2" as CONFIRMATION %}
{% import "macros/user_name.html.j2" as USER_NAME %}


{% block title %}
  {%- if target_user -%}
    {{ USER_NAME.VALUE(target_user) }} · Пользователь · Farado
  {%- else -%}
    Новый пользователь · Farado
  {%- endif -%}
{% endblock %}

{% set active_menu = 'users' %}
{% set tab_menu = [
  ['Свойства пользователя', 'properties'],
  ['Роли', 'roles'],
] %}


{#----------------------------------------------------------------------------#}
{% block styles %}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    {% if target_user %}
      {# TODO: временное решение, нужно разделить редактор профиля и статистику #}
      {# Ссылка на статистику пользователя #}
        {% if restriction.is_admin %}
          <li class="breadcrumb-item">
            <a href="/users/user_statistics/{{ target_user.id }}">Статистика</a>
          </li>
        {% endif %}
      {# /Ссылка на статистику пользователя #}

      <li class="breadcrumb-item active" aria-current="page">
        {{ USER_NAME.VALUE(target_user) }}
      </li>
    {% else %}
      <li class="breadcrumb-item active" aria-current="page">
        Новый пользователь
      </li>
    {% endif %}
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{# Таб 1 — Свойства пользователя #}
{% block tab_content_1 %}
  <div class="row placeholders">
    <form class="row g-3" action="/users/user" method="post">

      <div class="col-12">
        <label for="inputId" class="form-label">Идентификатор</label>
        <input
            type="text"
            name="target_user_id"
            class="form-control"
            id="inputId"
            value="{{ target_user.id }}"
            readonly>
      </div>

      <div class="col-md-6">
        <label for="inputLogin" class="form-label">Логин</label>
        <input
            type="text"
            name="target_user_login"
            class="form-control"
            id="inputLogin"
            value="{{ target_user.login }}"
            required>
      </div>

      <div class="col-md-6">
        <label for="inputEmail" class="form-label">Email</label>
        <input
            type="text"
            name="target_user_email"
            class="form-control"
            id="inputEmail"
            value="{{ target_user.email }}">
      </div>

      <div class="col-md-4">
        <label for="inputFirstName" class="form-label">Имя</label>
        <input
            type="text"
            name="target_user_first_name"
            class="form-control"
            id="inputFirstName"
            value="{{ target_user.first_name }}">
      </div>

      <div class="col-md-4">
        <label for="inputMiddleName" class="form-label">Отчество</label>
        <input
            type="text"
            name="target_user_middle_name"
            class="form-control"
            id="inputMiddleName"
            value="{{ target_user.middle_name }}">
      </div>

      <div class="col-md-4">
        <label for="inputLastName" class="form-label">Фамилия</label>
        <input
            type="text"
            name="target_user_last_name"
            class="form-control"
            id="inputLastName"
            value="{{ target_user.last_name }}">
      </div>

      <div class="col-md-6">
        <label for="inputPassword" class="form-label">Пароль</label>
        <input
            type="password"
            name="target_user_password"
            class="form-control"
            id="inputPassword"
            {% if not target_user %}required{% endif %}>
      </div>

      <div class="col-md-6">
        <label for="inputConfirmPassword" class="form-label">Подтвердите пароль</label>
        <input
            type="password"
            class="form-control"
            id="inputConfirmPassword">
        <span class="badge bg-warning text-dark" id="confirmPasswordMessage"></span>
      </div>

      <div class="col-12">
        <div class="form-check">
          <input
              class="form-check-input"
              name="target_user_need_change_password"
              type="checkbox"
              id="checkNeedChangePassword"
              {% if target_user.need_change_password %}checked{% endif %}>
          <label class="form-check-label" for="checkNeedChangePassword">
            Нужно сменить пароль
          </label>
        </div>
      </div>

      <div class="col-12">
        <div class="form-check">
          <input
              class="form-check-input"
              name="target_user_is_blocked"
              type="checkbox"
              id="checkIsBlocked"
              {% if target_user.is_blocked %}checked{% endif %}>
          <label class="form-check-label" for="checkIsBlocked">
            Заблокировать
          </label>
        </div>
      </div>

      <div class="col-12">
        <div class="clearfix">
          {% if target_user %}
            {# -- Кнопка: удалить -- #}
              {{ CONFIRMATION.BUTTON(
                  caption = '<i class="bi bi-trash"></i> Удалить',
                  title = 'Удалить данного пользователя',
                  class = 'btn btn-danger ml-3 float-start',
                  target = 'remove_user_confirmation_'
                      + target_user.id|string)
              }}
              {{ CONFIRMATION.MODAL_WINDOW(
                  title = 'Удаление пользователя',
                  text = 'Вы уверены, что хотите навсегда удалить пользователя «'
                      + target_user.last_name|e + ' ' + target_user.first_name|e
                      + '»?',
                  action_button_href = '/users/remove_user/'
                      + target_user.id|string,
                  action_button_text = 'Да',
                  window_id = 'remove_user_confirmation_'
                      + target_user.id|string)
              }}
            {# -- /Кнопка: удалить -- #}
          {% endif %}

          {# -- Кнопка: сохранить -- #}
            <button
                type="submit"
                id="saveButton"
                class="btn btn-success float-end">
              <i class="bi bi-save"></i> Сохранить
            </button>
          {# -- /Кнопка: сохранить -- #}
        </div>
      </div>

    </form>
  </div>
{% endblock tab_content_1 %}


{#----------------------------------------------------------------------------#}
{# Таб 2 — Роли #}
{% block tab_content_2 %}
  {% if target_user %}
    <div class="page-toolbar">
      {# -- Выпадающий список: добавить роль пользователю -- #}
        <button
            class="btn btn-outline-primary btn-sm dropdown-toggle"
            type="button"
            id="dropdownMenuAddRole"
            data-bs-toggle="dropdown"
            aria-expanded="false">
          Добавить <i class="bi bi-caret-down-fill" class="ml-1"></i>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuAddRole">
          {% for role in project_manager.roles() %}
            <li>
              <a  class="dropdown-item"
                  href="/users/add_user_role/{{ target_user.id }}/{{ role.id }}">
                {{- role.caption|e -}}
              </a>
            </li>
          {% endfor %}
        </ul>
      {# -- /Выпадающий список: добавить роль пользователю -- #}
    </div>

    <div class="row placeholders">
      <div class="col-12 mt-4">
        <table class="table">
          <thead class="table-dark">
            <tr>
              <th scope="col" style="width: 1%">Id</th>
              <th scope="col">Роли</th>
              <th scope="col" style="width: 1%"></th>
            </tr>
          </thead>
          <tbody>
            {% for user_role in project_manager.user_roles_by_user(target_user.id) %}
              <tr>
                <th scope="row">{{ user_role.id }}</th>
                <td>
                  {{ project_manager.role(user_role.role_id).caption|e }}</a>
                </td>
                <td>
                  <a href="/users/remove_user_role/{{ target_user.id }}/{{ user_role.id }}">
                    <span class="badge bg-danger">x</span>
                  </a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
{% endblock tab_content_2 %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  <script>
    $('#inputPassword, #inputConfirmPassword').on('keyup', function () {
      if ($('#inputPassword').val() == $('#inputConfirmPassword').val()) {
        $('#confirmPasswordMessage').html('');
        $('#saveButton').prop('disabled', false);
      } else {
        $('#confirmPasswordMessage').html('Пароли не совпадают');
        $('#saveButton').prop('disabled', true);
      }
    });
  </script>
{% endblock %}
